<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 400px;
            height: 300px;
        }
    </style>
</head>

<body>
    <div id="box">

    </div>
</body>

</html>
<script>
    var oBox = document.querySelector('#box')
    function Tab(boxDom, titleColor, titleHighColor, titleWidth, 
    titleHeight, titles, contentColor, contents,contentWidth,contentHeight) {
        //属性
        // (一、)属性：
        this.boxDom = boxDom;
        this.titleDom = null;
        this.contentDom = null;
        // 一、标题部分的属性
        // 标题的原始颜色
        this.titleColor = titleColor;
        // 标题的高亮颜色
        this.titleHighColor = titleHighColor;
        // 宽，高，
        this.titleWidth = titleWidth; //每个li的宽度
        this.titleHeight = titleHeight;

        // 标题数组
        this.titles = titles;

        // 二、内容部分的属性
        this.contentColor = contentColor;
        this.contentWidth = contentWidth;
        this.contentHeight = contentHeight;

        // 内容数组
        this.contents = contents;
        //方法
        //创建dom
        this.createDom = function () {
            // 1、创建标题部分的dom
            // 1）、创建ul
            this.titleDom = document.createElement("ul");
            // 标题的ul宽度和容器的宽度是一样的
            this.titleDom.style.cssText = `
                width: ${this.boxDom.offsetWidth}px;
                height: ${this.titleHeight}px;
                background-color: ${this.titleColor};
            `;
            this.boxDom.appendChild(this.titleDom);
            // 2)、创建li
            for (let i = 0; i < this.titles.length; i++) {
                let liDom = document.createElement("li");
                liDom.innerHTML = this.titles[i];
                liDom.style.cssText = `
                        float: left;
                        width: ${this.titleWidth}px;
                        height: ${this.titleHeight}px;
                        line-height: 40px;
                        text-align: center;
                `;
                // 第一个li要默认高亮
                if(i==0){
                    liDom.style.backgroundColor = this.titleHighColor;
                }
                this.titleDom.appendChild(liDom);
            }
            // 2、创建内容部分的dom
            // 1）、创建ul
            this.contentDom = document.createElement("ul");
            this.contentDom.style.cssText = `
                width: ${this.boxDom.offsetWidth}px;
                height: ${this.contentHeight}px;
                border: 1px solid green;
                box-sizing: border-box;
            `;
            this.boxDom.appendChild(this.contentDom);
            // 2)、创建li
            for (let i = 0; i < this.contents.length; i++) {
                let liDom = document.createElement("li");
                liDom.innerHTML = this.contents[i];
                liDom.style.cssText = `
                    width: ${this.boxDom.offsetWidth}px;
                    height: ${this.contentHeight}px;
                    background-color: ${this.contentColor};
                    border: 1px solid black;
                    box-sizing: border-box;
                    display: none;
                `;
                // 内容部分的第一个li默认显示
                if(i==0){
                    liDom.style.display = "block";
                }
                this.contentDom.appendChild(liDom);
            }
        }

        this.addEvent = function(){
            // 获取标题部分的li
            let oLiTitles = this.titleDom.children;
            // 获取内容部分的li
            let oLiContents = this.contentDom.children;

            // 循环给每个li绑定点击事件
            for (let i = 0; i < oLiTitles.length; i++) {
                oLiTitles[i].onclick = ()=> {
                    // 1、标题部分：把当前点击的li的背景颜色进行改变(把其它li的背景颜色恢复成初始颜色)
                    // 1)、让所有的li恢复成初始颜色
                    for (let j = 0; j < oLiTitles.length; j++) {
                        oLiTitles[j].style.backgroundColor = this.titleColor;
                    }
                    // 2）、让当前li的颜色高亮色（桔色）
                    oLiTitles[i].style.backgroundColor = this.titleHighColor;
                    // 2、内容部分：把当前点击li对应的内容li显示（其它的内容li隐藏）
                    // 1)、让所有的li隐藏
                    for (let j = 0; j < oLiContents.length; j++) {
                        oLiContents[j].style.display = "none";
                    }
                    // 2）、让当前点击li对应的内容li显示
                    oLiContents[i].style.display = "block";
                }
            }
        }

    }
    window.onload=function(){
        let t1=new Tab(oBox,'yellow','orange',120,40,['科技','探索','NZ2001'],
        'gray',['科技1','探索1','nnnn']
        )
        t1.createDom()
        t1.addEvent()

    }
</script>